<mat-form-field>
  <mat-label>Selected tab index</mat-label>
  <input matInput type="number" [formControl]="selected">
</mat-form-field>

<div>
  <button matButton="elevated"
          class="example-add-tab-button"
          (click)="addTab(selectAfterAdding.checked)">
    Add new tab
  </button>
  <mat-checkbox #selectAfterAdding> Select tab after adding </mat-checkbox>
</div>

<mat-tab-group [selectedIndex]="selected.value"
               (selectedIndexChange)="selected.setValue($event)">
  @for (tab of tabs; track tab; let index = $index) {
    <mat-tab [label]="tab">
      Contents for {{tab}} tab

      <button matButton="elevated"
              class="example-delete-tab-button"
              [disabled]="tabs.length === 1"
              (click)="removeTab(index)">
        Delete Tab
      </button>
    </mat-tab>
  }
</mat-tab-group>
